<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .welcome, .addUser{display: none;}
  </style>
</head>
<body>
  <h2>这是首页</h2>

  <p class="login"><a href="./login.html">登录</a></p>
  <p class="welcome">欢迎<span>xxx</span>，<em>退出</em></p>

  <a href="./insert.html" class="addUser">添加用户信息</a>


  <table border="1" width="600">
    <thead>
      <tr>
        <th>姓名</th>
        <th>手机号</th>
        <th>部门编号</th>
        <th>权限</th>
        <th>注册时间</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

</body>
<script src="../js/get.js"></script>
<script>

  // 获取登录成功后的信息
  const userData = JSON.parse(localStorage.getItem("userData")) || {};

  // 判断是否存在登录成功后的信息
  if(Object.keys( userData ).length < 1){
    // 不存在，未登录
    $(".login").style.display = "block";
    $(".welcome").style.display = "none";
    $(".addUser").style.display = "none";
  }else{
    // 存在，已登录
    $(".login").style.display = "none";
    $(".welcome").style.display = "block";
    $(".addUser").style.display = "block";
    $(".welcome span").innerHTML = userData.uName || userData.username;
  }

  // 点击退出
  $(".welcome em").onclick = function(){
    // 清除登录成功后的信息
    localStorage.removeItem("userData");
    // 刷新页面
    location.reload();
  }

  const getUserUrl = "http://10.11.55.86:3000/getuser";
  const token = userData.token;
  // 发起获取用户信息请求
  ajaxGet({
    url: getUserUrl,
    data: { token },
    success(xhr){
      // 解析数据
      const res = JSON.parse(xhr.responseText);
      // 准备拼接页面结构
      let str = "";
      if(res.code === 0){
        str = `<tr><td colspan="5">${res.msg}，请重新<a href="./login.html">登录</a></td></tr>`;
      }else{
        // 拼接页面结构
        res.data.forEach(val=>{
          str += `<tr>
                    <td>${val.uName}</td>
                    <td>${val.tel}</td>
                    <td>${val.tId}</td>
                    <td>${val.power}</td>
                    <td>${new Date(val.joinTime).toLocaleDateString()}</td>
                  </tr>`;
        })
      }
      // 设置到指定视图
      $("tbody").innerHTML = str;
    }
  })






  function $(s){
    return document.querySelector(s)
  }
  
</script>
</html>